import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import RNFS from 'react-native-fs'
import ImagePicker from 'react-native-image-crop-picker'
import fetchWebApi from '../../../../public/WebApi/fetchBase';
import { POST_ALBUMINFDOATA_UPLOAD } from '../../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class personalPortrait extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "个人头像", // 头部标题
      titleColor: "#fff", // 标题颜色
      rightText: "完成", // 右边完成按钮
      backgroundColor: "#000",// 标题背景颜色
      personalPortrait: this.props.navigation.state.params.personalPortrait, // 原本的头像
      contents: '',
      typeArr: '',
      len: [],
    };
  }

  componentDidMount = () => { }

  // 上传新的头像方法
  uploadPersonalPortrait = () => {
    this.props.navigation.state.params.refresh(this.state.personalPortrait)
    this.props.navigation.goBack()// 返回上一级
  }
  async uploadDatasbase() {
    const res = await fetchWebApi(POST_ALBUMINFDOATA_UPLOAD, {
      fileContent: this.state.contents,
      type: this.state.typeArr
    }, 'POST')
    // console.log('################ upload');
    // console.log(res);
    this.setState({
      personalPortrait: res.url
    })
  }
  render() {
    return (
      <View style={styles.warperPersonalPortrait}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={this.state.titleColor}
          right={this.state.rightText}
          backgroundColor={this.state.backgroundColor}
          pressRight={() => {
            this.uploadPersonalPortrait() // 上传 新的头像
          }}
        />
        <View style={styles.personalPortrait}>
          {/* 用户头像 */}
          <TouchableOpacity onPress={() => {
            ImagePicker.openPicker({
              width: 300,
              height: 400,
              // cropping: true
            }).then(images => {
              // 将路径分割，取出图片类型
              this.state.len.push(images.path.split('.'))
              this.state.len.map(item => {
                this.setState({
                  typeArr: item[item.length - 1]
                })
              })
              RNFS.readFile(images.path, 'base64')
                .then(content => {
                  // base64 本地相册地址转换
                  this.setState({
                    contents: content
                  })
                  this.uploadDatasbase()
                })
            })
              .catch(err => {
                console.log(err);
              })
          }} style={styles.personalPortraitBox}>
            <Image style={styles.personalPortraitPic} source={{ uri: this.state.personalPortrait }} />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warperPersonalPortrait: {
    flex: 1,
    backgroundColor: "#000",
  },
  personalPortrait: {
    height: "100%",
    justifyContent: "center",
    alignItems: "center"
  },
  personalPortraitBox: {
    width: "100%",
  },
  personalPortraitPic: {
    width: "100%",
    height: 500,
    marginBottom: 90
  },
})